<template>
  <div>
    <div class="top">
      <img @click="goback"
        class="goback"
        src=""
        alt
      />
      <h4 v-if="cinema.cinema">{{cinema.cinema.name}}</h4>
      <p class="first" v-if="cinema.film">{{cinema.film.name}}</p>
      <p>{{dateday(cinema.showAt)}}</p>
    </div>
    <ul>
      <li v-for="(i,index) in mysetlist" :key="index" :class="{'nonething':!i}">
        <span v-for="(k,kindex) in i" :key="kindex" :class="{'nonething':!k}" @click="changecolor(k)">
          <span class="sets" :style="{ background:((k&&k.ison)?'orange':'')}"  :class="[(k&&(k.myset)?'colors':'')]">
            <span  class="setclass" :style="{ background:((k&&k.ison)?'orange':'')}" :class="[(k&&(k.myset)?'colors':'')]"></span>
          </span>
        </span>
      </li>
    </ul>
    <div class="end">
      请先选座
    </div>
  </div>
</template>
<script>
import { hightw, tickets } from "@/api";
export default {
  data() {
    return {
      filmlist: "", //所有数据
      height: "",
      width: "",
      setlist: "", //原始座位
      mysetlist: [], //二维数组座位
      cinema: ""
    };
  },

  methods: {
    dateday(i) {
      //计算时间
      var myDate = new Date();
      myDate.setTime(1000 * i);
      var mytime = `${myDate.getMonth() +
        1}月${myDate.getDate()}日${myDate.getHours()}:${myDate.getMinutes()}`;
      return mytime;
    },
    changecolor(k){
      if(k&&!k.ison){
        k.myset=!k.myset
      console.log(k)
      }
    },
    goback(){
      this.$router.go(-1)
    }
  },

  created() {
    hightw(this.$route.params.id).then(resp => {
      //影院情况
      this.cinema = resp.data.data.schedule;
    });
    tickets(this.$route.params.id).then(resp => {
      //座位情况
      this.filmlist = resp.data.data.seatingChart;
      this.setlist = this.filmlist.seats;
      this.height = this.filmlist.height;
      this.width = this.filmlist.width;
      var arr = new Array();
      for (let i = 1; i <= this.height; i++) {
        //行
        arr[i] = new Array();
        for (let j = 1; j <= this.width; j++) {
          //列
          this.setlist.forEach(k => {
            if (i == k.rowNum) {
              if (j == k.columnNum) {
                arr[i][j] = { haveset: true, ison: k.isOccupied,myset:false }; //是否对照后删除，减少工作量
              }
            }
          });
        }
      }
      this.mysetlist = arr;
      console.log(arr);
    });
  }
};
</script>
<style scoped>
.colors{
  background: yellowgreen !important;
}
.goback {
  height: 0.3;
  position: fixed;
  top: 0.3rem;
  left: 0.3rem;
  width: 0.3rem;
}
h4 {
  text-align: center;
  font-size: 0.4rem;
  font-weight: 400;
  height: 1rem;
  line-height: 1rem;
}
.nonething {
  opacity: 0;
}
ul {
  overflow: auto;
}
li {
  margin-right: 1rem;
  height: 0.6rem;
  white-space: nowrap;
}
.sets {
  display: inline-block;
  height: 0.3rem;
  width: 0.54rem;
  border: 0.01rem solid rgb(134, 134, 134);
  margin: 0.15rem;
  position: relative;
  background: white;
}
.setclass {
  display: inline-block;
  height: 0.4rem;
  width: 0.4rem;
  border: 0.01rem solid rgb(134, 134, 134);
  position: absolute;
  z-index: 2;
  top: -0.16rem;
  left: 0.06rem;
  background: white;
}
.top p {
  padding-left: 0.3rem;
  font-size: 0.3rem;
  height: 0.6rem;
  line-height: 0.6rem;
}
.top .first {
  margin-top: 0.3rem;
  font-size: 0.4rem;
  line-height: 0.4rem;
}
.end{
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  background: #ff5f16;
  color: white;
  font-size: 0.5rem;
}
</style>